<template>
	<view class="public-list-files" v-if="item.images.length||item.videos.length||item.audios.length||item.documents.length">
		<!-- 图片 -->
		<view class="public-list-files-images" v-if="item.images.length">
			<view
				class="public-list-files-images-1"
				v-if="item.images.length == 1"
				@click.stop="$_picturePreview(1,item.images)">
				<global-lazy-load-image
					:image="item.images[0].imageRatioUrl"
					width=""
					height=""
					borderRadius="10"></global-lazy-load-image>
			</view>
			<view class="public-list-files-images-2" v-else-if="item.images.length == 2">
				<view
					class="public-list-for"
					v-for="(image,index) in item.images"
					@click.stop="$_picturePreview(index,item.images)">
					<global-lazy-load-image
						:image="image.imageSquareUrl"
						width=""
						height=""
						borderRadius="0"></global-lazy-load-image>
				</view>
			</view>
			<view class="public-list-files-images-3" v-else-if="item.images.length == 3">
				<view
					class="public-list-for"
					v-for="(image,index) in item.images"
					@click.stop="$_picturePreview(index,item.images)">
					<global-lazy-load-image
						:image="image.imageSquareUrl"
						width=""
						height=""
						borderRadius="0"></global-lazy-load-image>
				</view>
			</view>
			<view class="public-list-files-images-4" v-else-if="item.images.length == 4">
				<view
					class="public-list-for"
					v-for="(image,index) in item.images"
					@click.stop="$_picturePreview(index,item.images)">
					<global-lazy-load-image
						:image="image.imageSquareUrl"
						width=""
						height=""
						borderRadius="0"></global-lazy-load-image>
				</view>
			</view>
			<view class="public-list-files-images-5" v-else-if="item.images.length == 5">
				<view class="images-5-top-box">
					<view
						class="images-5-top-box-left"
						@click.stop="$_picturePreview(0,item.images)">
						<global-lazy-load-image
							:image="item.images[0].imageSquareUrl"
							width=""
							height=""
							borderRadius="0"></global-lazy-load-image>
					</view>
					<view class="images-5-top-box-right">
						<view @click.stop="$_picturePreview(1,item.images)">
							<global-lazy-load-image
								:image="item.images[1].imageSquareUrl"
								width=""
								height=""
								borderRadius="0"></global-lazy-load-image>
						</view>
						<view @click.stop="$_picturePreview(2,item.images)">
							<global-lazy-load-image
								:image="item.images[2].imageSquareUrl"
								width=""
								height=""
								borderRadius="0"></global-lazy-load-image>
						</view>
					</view>
				</view>
				<view class="images-5-bottom-box">
					<view @click.stop="$_picturePreview(3,item.images)">
						<image :src="item.images[3].imageSquareUrl" mode="widthFix"></image>
					</view>
					<view @click.stop="$_picturePreview(4,item.images)">
						<image :src="item.images[4].imageSquareUrl" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="public-list-files-images-6" v-else-if="item.images.length == 6">
				<view
					class="public-list-for"
					v-for="(image,index) in item.images"
					@click.stop="$_picturePreview(index,item.images)">
					<global-lazy-load-image
						:image="image.imageSquareUrl"
						width=""
						height=""
						borderRadius="0"></global-lazy-load-image>
				</view>
			</view>
			<view class="public-list-files-images-7" v-else-if="item.images.length == 7">
				<view
					class="public-list-for"
					v-for="(image,index) in item.images"
					@click.stop="$_picturePreview(index,item.images)">
					<global-lazy-load-image
						:image="image.imageSquareUrl"
						width=""
						height=""
						borderRadius="0"></global-lazy-load-image>
				</view>
			</view>
			<view class="public-list-files-images-8" v-else-if="item.images.length == 8">
				<view
					class="public-list-for"
					v-for="(image,index) in item.images"
					@click.stop="$_picturePreview(index,item.images)">
					<global-lazy-load-image
						:image="image.imageSquareUrl"
						width=""
						height=""
						borderRadius="0"></global-lazy-load-image>
				</view>
			</view>
			<view class="public-list-files-images-6" v-else>
				<view
					class="public-list-for"
					v-for="(image,index) in item.images"
					@click.stop="$_picturePreview(index,item.images)">
					<global-lazy-load-image
						:image="image.imageSquareUrl"
						width="100%"
						height=""
						borderRadius="0"></global-lazy-load-image>
				</view>
			</view>
		</view>
		<!-- 视频 -->
		<view class="public-list-files-videos" v-if="item.videos.length">
			<view
				class="public-list-files-videos-1"
				v-if="item.videos.length == 1"
				@click.stop="$_to('pages/video?url=' + encodeURIComponent(item.videos[0].videoUrl))">
				<view class="public-list-files-videos-img">
					<image
						v-if="item.videos[0].videoPosterUrl"
						:src="item.videos[0].videoPosterUrl" mode="widthFix"></image>
				</view>
				<text class="iconfont icon-play"></text>
			</view>
			<view
				class="public-list-files-videos-more"
				v-else>
				<view
					class="public-list-files-videos-more-box"
					v-for="video in item.videos"
					@click.stop="$_to('pages/video?url=' + encodeURIComponent(video.videoUrl))">
					<view class="public-list-files-videos-img">
						<image
							v-if="video.videoPosterUrl"
							:src="video.videoPosterUrl" mode="widthFix"></image>
					</view>
					<text class="iconfont icon-play"></text>
				</view>
				
			</view>
		</view>
		<!-- 音频 -->
		<view class="public-list-files-audios" v-if="item.audios.length">
			<view class="public-list-files-audios-1" v-if="item.audios.length == 1">
				<global-audio
					Css="width:100%;"
					:Url="item.audios[0].audioUrl"></global-audio>
			</view>
			<view class="public-list-files-audios-more" v-else>
				<view class="public-list-for" v-for="audio in item.audios">
					<global-audio
						Css="width:100%;"
						:Url="audio.audioUrl"></global-audio>
				</view>
			</view>
		</view>
		<!-- 文档 -->
		<template v-if="item.documents.length"></template>
	</view>
</template>

<script>
	export default {
		name:"public-list-files",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				
			};
		},
		mounted(){
			
		}
	}
</script>

<style lang="scss" scoped>
.public-list-files{
	.public-list-files-images{
		.public-list-files-images-1{
			width: 66%;
			margin-top: 20rpx;
		}
		.public-list-files-images-2{
			width: 100%;
			display: flex;
			border-radius: 10rpx;
			overflow: hidden;
			margin-top: 20rpx;
			.public-list-for{
				width: 50%;
			}
			.public-list-for:nth-child(1){
				width: 50%;
				margin-right: 5rpx;
			}
			.public-list-for:nth-child(2){
				width: 50%;
				margin-left: 5rpx;
			}
		}
		.public-list-files-images-3{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			border-radius: 10rpx;
			overflow: hidden;
			margin-top: 20rpx;
			.public-list-for:nth-child(1){
				width: 100%;
				max-height: 300rpx;
				overflow: hidden;
				margin-bottom: 10rpx;
			}
			.public-list-for:nth-child(2){
				width:calc(50% - 5rpx);
				margin-right: 5rpx;
			}
			.public-list-for:nth-child(3){
				width:calc(50% - 5rpx);
				margin-left: 5rpx;
			}
		}
		.public-list-files-images-4{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			border-radius: 10rpx;
			overflow: hidden;
			margin-top: 20rpx;
			justify-content:space-between;
			.public-list-for:nth-child(1){
				width: 100%;
				max-height: 300rpx;
				overflow: hidden;
				margin-bottom: 10rpx;
			}
			.public-list-for:nth-child(2){
				width:calc(33.33% - 6.7rpx);
			}
			.public-list-for:nth-child(3){
				width:calc(33.33% - 6.7rpx);
			}
			.public-list-for:nth-child(4){
				width:calc(33.33% - 6.7rpx);
			}
		}
		.public-list-files-images-5{
			width: 100%;
			border-radius: 10rpx;
			overflow: hidden;
			margin-top: 20rpx;
			.images-5-top-box{
				width: 100%;
				display: flex;
				.images-5-top-box-left{
					overflow: hidden;
					width: 60%;
					height: 400rpx;
					flex-shrink: 0;
				}
				.images-5-top-box-right{
					flex: 1;
					margin-left: 10rpx;
					display: flex;
					align-items: space-between;
					flex-flow: column;
					view{
						width: 100%;
						height: 195rpx;
						overflow: hidden;
					}
					view:nth-child(1){
						margin-bottom: 5rpx;
					}
					view:nth-child(2){
						margin-top: 5rpx;
					}
				}
			}
			.images-5-bottom-box{
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
				view{
					width:calc(50% - 5rpx);
					max-height: 250rpx;
					overflow: hidden;
				}
			}
		}
		.public-list-files-images-6{
			width: 100%;
			border-radius: 10rpx;
			overflow: hidden;
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content:space-between;
			.public-list-for{
				width:calc(33.33% - 6.66rpx);
				margin-top: 10rpx;
			}
			.public-list-for:nth-child(1),.public-list-for:nth-child(2),.public-list-for:nth-child(3){
				margin-top: 0;
			}
		}
		.public-list-files-images-7{
			width: 100%;
			border-radius: 10rpx;
			overflow: hidden;
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content:space-between;
			.public-list-for:nth-child(1){
				width:100%;
				margin-top: 0;
				max-height: 350rpx;
				overflow: hidden;
			}
			.public-list-for{
				width:calc(33.33% - 6.66rpx);
				margin-top: 10rpx;
				overflow: hidden;
			}
		}
		.public-list-files-images-8{
			width: 100%;
			border-radius: 10rpx;
			overflow: hidden;
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content:space-between;
			.public-list-for:nth-child(1){
				width:calc(50% - 5rpx);
				margin-top: 0;
				max-height: 350rpx;
				overflow: hidden;
			}
			.public-list-for:nth-child(2){
				width:calc(50% - 5rpx);
				margin-top: 0;
				max-height: 350rpx;
				overflow: hidden;
			}
			.public-list-for{
				width:calc(33.33% - 6.66rpx);
				margin-top: 10rpx;
				overflow: hidden;
			}
		}
	}
	.public-list-files-videos{
		.public-list-files-videos-1{
			width: 100%;
			height: 200rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;
			.public-list-files-videos-img{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 200rpx;
				overflow: hidden;
				background: $primary;
				image{
					width: 100%;
				}
			}
			text{
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 100%;
				height: 200rpx;
				background-color:rgba(0,0,0,0.6);
				line-height: 100rpx;
				color: #FFF;
				font-size: 100rpx;
			}
		}
		.public-list-files-videos-more{
			display: flex;
			width: 100%;
			justify-content:space-between;
			flex-wrap: wrap;
			padding-top: 10rpx;
			.public-list-files-videos-more-box{
				width:calc(50% - 5rpx);
				height: 150rpx;
				position: relative;
				margin-top: 10rpx;
				border-radius: 10rpx;
				overflow: hidden;
				.public-list-files-videos-img{
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					width: 100%;
					height: 150rpx;
					overflow: hidden;
					background: $primary;
					image{
						width: 100%;
					}
				}
				text{
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					width: 100%;
					height: 150rpx;
					background-color:rgba(0,0,0,0.6);
					line-height: 80rpx;
					color: #FFF;
					font-size: 80rpx;
				}
			}
		}
	}
	.public-list-files-audios-1{
		margin-top: 20rpx;
	}
	.public-list-files-audios-more{
		display: flex;
		flex-wrap: wrap;
		justify-content:space-between;
		margin-top: 10rpx;
		.public-list-for{
			width:calc(50% - 5rpx);
			margin-top: 10rpx;
		}
	}
}
</style>